import * as echarts from 'echarts'

export const Option1 = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      textStyle: {
        color: '#879DB3',
        fontSize: 17,
      },
    },
    grid: {
      top: '36px',
      left: '0px',
      bottom: '0px',
      right: '28px',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          //坐标轴刻度相关设置。
          show: false,
        },
        axisLine: {
          lineStyle: {
            show: true,
            lineStyle: {
              color: 'rgba(169, 203, 223, 1)',
            },
          },
        },
        splitArea: {
          // show: true,
          color: '#f00',
          lineStyle: {
            color: '#f00',
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            show: true,
            color: '#A9CBDF',
            fontSize: 17,
          },
        },
        splitLine: {
          show: false,
        },
        boundaryGap: false,
        data: ['2019', '2020', '2021', '2022', '2023', '2024'],
      },
    ],

    yAxis: [
      {
        nameTextStyle: {
          color: '#8c9493',
        },
        type: 'value',
        max: '700',
        splitNumber: 5,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#8c9493',
          },
        },
        position: 'left',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#879DB3',
            opacity: 0.2,
          },
        },
        axisLabel: {
          textStyle: {
            fontWeight: 600,
            color: '#879DB3',
            fontSize: 17,
          },
        },
      },
      {
        type: 'value',
        position: 'right',
        axisLabel: {
          textStyle: {
            fontWeight: 0,
            color: '#879DB3',
            fontSize: 17,
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '第一产业总产值',
        type: 'line',
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: 'circle',
        symbolSize: 10,
        lineStyle: {
          normal: {
            color: 'rgba(26, 128, 254, 1)',
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 5,
            shadowOffsetX: 5,
          },
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'rgba(26, 128, 254, 1)',
            fontSize: 17,
          },
        },

        itemStyle: {
          color: 'rgba(26, 128, 254, 1)',
          borderColor: 'rgba(26, 128, 254, 1)',
          borderWidth: 3,
          shadowColor: 'rgba(0, 0, 0, .3)',
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: true,
          backgroundColor: '#02090d',
          borderColor: 'rgba(26, 128, 254, 0.4)', // 边框颜色
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: 'rgba(17, 27, 54, 1)',
            },
          },
          y: 'center',
          textStyle: {
            color: '#879DB3',
            fontSize: 17,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(26, 128, 254, 0.3)',
                },
                {
                  offset: 1,
                  color: 'rgba(0,202,149,0)',
                },
              ],
              false
            ),
            shadowColor: 'rgba(26, 128, 254, 0.9)',
            shadowBlur: 2,
          },
        },
        data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
      },
    ],
  }

  return option
}
export const Option2 = () => {
  // mock数据
  const dataArr = {
    xdata: ['2017', '2018', '2019', '2020'],
    vaccination: [1000, 1300, 1200, 800],
    unvaccinated: [700, 800, 900, 500],
    unvaccinatedTwo: [400, 300, 500, 200],
    unvaccinatedTree: [500, 500, 400, 620],
  }

  // tooltip
  const tooltip = {
    trigger: 'axis',
    formatter: (params: any[]) => {
      let rander = params
        .map((item: { seriesType: string; seriesName: any; value: string }) =>
          item.seriesType !== 'pictorialBar'
            ? `<div>${item.seriesName}: ${
                item.seriesType !== 'line' ? item.value : item.value + '%'
              }</div>`
            : ''
        )
        .join('')
      return `
  <div>${params[0].axisValue}</div>
  ${rander}
`
    },
    backgroundColor: '#02090d',
    borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
    axisPointer: {
      type: 'shadow',
      label: {
        backgroundColor: 'rgba(17, 27, 54, 1)',
      },
    },
    y: 'center',
    textStyle: {
      color: '#879DB3',
      fontSize: 17,
    },
  }
  const legend = {
    data: [
      {
        name: '农业',
        icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
      },
      {
        name: '林业',
        icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
      },
      {
        name: '牧业',
        icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
      },
      {
        name: '渔业',
        icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
      },
    ],
    itemWidth: 14,
    itemHeight: 14,
    itemGap: 40,
    top: '22px',
    //图例滚动
    // type: 'scroll',
    //图例文字样式
    textStyle: {
      color: 'rgba(162, 195, 215, 1)',
      fontSize: 17,
    },
  }
  const grid = {
    top: '66px',
    left: '0px',
    bottom: '0px',
    right: '0px',
    containLabel: true,
  }
  // xAxis
  const xAxis = {
    axisTick: {
      //坐标轴刻度相关设置。
      show: false,
    },
    axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
    axisLabel: {
      textStyle: { fontSize: 17, color: 'rgba(169, 203, 223, 1)' },
    },

    data: dataArr.xdata,
  }

  // yAxis
  const yAxis = [
    {
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
      axisLabel: {
        textStyle: {
          fontSize: 17,
          color: 'rgba(169, 203, 223, 1)',
        },
      },
    },
    {
      show: false,
      max: 100,
      splitLine: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        textStyle: {
          fontSize: 17,
          color: 'rgba(169, 203, 223, 1)',
        },
        formatter: (params: any) => {
          return `${params}%`
        },
      },
    },
  ]

  // series
  const series = [
    {
      z: 1,
      name: '农业',
      type: 'pictorialBar',
      symbolPosition: 'end',
      data: dataArr.vaccination,
      symbol: 'diamond',
      symbolOffset: ['-75%', '-50%'],
      symbolSize: [29, 19],
      itemStyle: {
        borderColor: '#2fffa4',
        color: '#2fffa4',
      },
    },
    {
      z: 1,
      type: 'bar',
      name: '农业',
      barWidth: 30,
      barGap: '-50%',
      data: dataArr.vaccination,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: 'rgba(29, 245, 160, .7)' },
            { offset: 0.5, color: 'rgba(29, 245, 160, .7)' },
            { offset: 0.5, color: 'rgba(29, 245, 160, .3)' },
            { offset: 1, color: 'rgba(29, 245, 160, .3)' },
          ],
        },
      },
    },
    {
      z: 2,
      name: '林业',
      type: 'pictorialBar',
      symbolPosition: 'end',
      data: dataArr.unvaccinated,
      symbol: 'diamond',
      symbolOffset: ['-30%', '-50%'],
      symbolSize: [29, 19],
      itemStyle: {
        borderColor: '#32ffee',
        color: '#32ffee',
      },
    },
    {
      z: 2,
      type: 'bar',
      name: '林业',
      barWidth: 30,
      data: dataArr.unvaccinated,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: 'rgba(50, 255, 238, .7)' },
            { offset: 0.5, color: 'rgba(50, 255, 238, .7)' },
            { offset: 0.5, color: 'rgba(50, 255, 238, .3)' },
            { offset: 1, color: 'rgba(50, 255, 238, .3)' },
          ],
        },
      },
    },
    {
      z: 2,
      name: '牧业',
      type: 'pictorialBar',
      symbolPosition: 'end',
      data: dataArr.unvaccinated,
      symbol: 'diamond',
      symbolOffset: ['25%', '-50%'],
      symbolSize: [29, 19],
      itemStyle: {
        borderColor: '#ffd11a',
        color: '#ffd11a',
      },
    },
    {
      z: 2,
      type: 'bar',
      name: '牧业',
      barWidth: 30,
      data: dataArr.unvaccinated,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: 'rgba(255, 209, 26, .7)' },
            { offset: 0.5, color: 'rgba(255, 209, 26, .7)' },
            { offset: 0.5, color: 'rgba(255, 209, 26, .3)' },
            { offset: 1, color: 'rgba(255, 209, 26, .3)' },
          ],
        },
      },
    },
    {
      z: 3,
      name: '渔业',
      type: 'pictorialBar',
      symbolPosition: 'end',
      data: dataArr.unvaccinatedTwo,
      symbol: 'diamond',
      symbolOffset: ['80%', '-50%'],
      symbolSize: [29, 19],
      itemStyle: {
        borderColor: 'rgba(255, 103, 76, 1)',
        color: 'rgba(255, 103, 76, 1)',
      },
    },
    {
      z: 3,
      type: 'bar',
      name: '渔业',
      barWidth: 30,
      data: dataArr.unvaccinatedTwo,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: 'rgba(255, 103, 76, .7)' },
            { offset: 0.5, color: 'rgba(255, 103, 76, .7)' },
            { offset: 0.5, color: 'rgba(255, 103, 76, .3)' },
            { offset: 1, color: 'rgba(255, 103, 76, .3)' },
          ],
        },
      },
    },
  ]
  const option = { tooltip, xAxis, yAxis, series, grid, legend }
  return option
}
export const Option3 = () => {
  let chartdata = [
    [111, 222, 333, 444],
    ['高标准农田', '永久基本农田', '粮食生产功能区 ', '重要农产品生产保护区'],
  ]

  var getmydmc = chartdata[1] //数据点名称
  var getmyd = chartdata[0] //收入金额
  var getmydzd = []

  let big = 0
  getmyd.forEach((el: any) => {
    if (!(el === undefined || el === '')) {
      if (big < Number(el)) {
        big = Number(el)
      }
    }
  })
  for (let i = 0; i < getmyd.length; i++) {
    getmydzd.push(big * 4)
  }
  //计算最大值
  function calMax(arr: any) {
    let max = 0
    arr.forEach((el: any[]) => {
      el.forEach((el1) => {
        if (!(el1 === undefined || el1 === '')) {
          if (max < Number(el1)) {
            max = Number(el1)
          }
        }
      })
    })
    let maxint = Math.ceil(max / 9.5)
    //不让最高的值超过最上面的刻度
    let maxval = maxint * 10
    //让显示的刻度是整数
    return maxval
  }

  const max = Math.ceil(calMax([getmyd]) / 10) * 10
  const option = {
    grid: {
      top: '40px',
      left: '0%',
      bottom: '0px',
      right: '0px',
      containLabel: true,
    },

    xAxis: [
      {
        type: 'value',
        axisLabel: {
          show: false,
          color: '#fff',
          formatter: function (val: any) {
            return val + ''
          },
          textStyle: {
            fontSize: 17,
          },
        },
        min: 0,
        max: max, // 计算最大值
        interval: max / 5, //  平均分为5份
        splitNumber: 5,
        splitLine: {
          show: false,
          lineStyle: {
            color: '#fff',
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff',
            width: 2,
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        axisLabel: {
          show: false,
        },
        min: 0,
        max: max, // 计算最大值
        interval: max / 10, //  平均分为5份
        splitNumber: 10,
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#D8D8D8',
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff',
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        inverse: false,
        data: getmydmc,
        axisLabel: {
          padding: [-6, 0, 50, -10],
          inside: true,
          textStyle: {
            fontSize: 22,
            fontFamily: 'PingFang SC',
            fontWeight: 400,
            color: 'rgba(169, 203, 223, 1)',
            align: 'left',
          },

          formatter: '{value}\n{a|占位}',
          rich: {
            a: {
              color: 'transparent',
              lineHeight: 30,
              fontFamily: 'digital',
              fontSize: 26,
              shadowColor: 'rgba(0, 0, 0, 1)',
              shadowBlur: 10,
            },
          },
        },
        // offset: 0,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },

      {
        //左侧柱状图的Y轴
        gridIndex: 0, //y轴所在的 grid 的索引
        splitLine: 'none',
        axisTick: 'none',
        axisLine: 'none',
        data: getmyd,
        inverse: true,
        axisLabel: {
          show: true,
          verticalAlign: 'bottom',
          align: 'right',
          padding: [0, 10, 30, 0],
          textStyle: {
            color: '#fff',
            fontSize: '20',
          },
          formatter: function (value: string) {
            return '{x|' + value + '}  {y|' + '}'
          },
          rich: {
            y: {
              color: 'rgba(102, 181, 255, 1)',
              fontFamily: 'Orbitron',
              fontSize: 20,
            },
            x: {
              color: 'rgba(102, 181, 255, 1)',
              fontFamily: 'Orbitron',
              fontSize: 20,
            },
          },
        },
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        show: true,
        height: 15,
        start: 1,
        end: 100,
        orient: 'vertical',
        zlevel: 66,
      },
    ],
    series: [
      {
        name: '值',
        type: 'bar',
        barGap: '-130%',
        // zlevel: 1,
        xAxisIndex: 0,
        label: {
          show: false,
          position: 'right',
          textStyle: {
            color: '#fff',
            fontSize: 20,
          },
        },
        itemStyle: {
          normal: {
            barBorderRadius: 4,
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: '#46B7ED', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(102, 181, 255, 1)', // 100% 处的颜色
                },
              ],
            },
          },
        },
        barWidth: 26,
        data: getmyd,
        z: 0,
      },
      {
        // 分隔
        type: 'pictorialBar',
        symbolRotate: '-20',
        itemStyle: {
          normal: {
            color: 'rgba(1, 12, 38, 0.4)',
          },
        },
        symbolRepeat: 'fixed',
        symbolMargin: 10,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [5, 40],
        symbolPosition: 'start',
        symbolOffset: [0, -1],
        data: getmyd,
        z: 66,
        animationEasing: 'elasticOut',
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 32,
        barGap: '-110%',
        data: getmydzd,
        itemStyle: {
          normal: {
            color: 'rgba(5,59,113,.7)',
            barBorderRadius: 6,
            borderColor: 'rgba(102, 181, 255, 1)',
          },
        },
        z: -1,
      },
    ],
  }
  return option
}
export const Option4 = () => {
  const newchartName = ['粮食作物', '油料作物', '糖料作物', '蔬菜', '果类'],
    newchartValue1: any = ['91', '51', '29', '91', '51', '29', '91', '51']
  const barWidth = 26
  const color1 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
      {
        //第一节下面
        offset: 0,
        color: '#E7AB47',
      },
      {
        offset: 1,

        color: 'rgba(255,164,41,.16)',
      },
    ],
  }

  const option = {
    //提示框
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      formatter: function (param: any) {
        const resultTooltip =
          "<div style='background:rgba(13,5,30,.3);padding:5px 10px;border-radius:4px;'>" +
          "<div style='text-align:center;'>" +
          param[0].name +
          '</div>' +
          "<div style='padding-top:5px;'>" +
          "<span style='display:inline-block;border-radius:4px;width:20px;height:10px;background-color:rgba(255,164,41,.3);border: 2px solid #ffc241;'></span>" +
          "<span style=''> " +
          param[0].seriesName +
          ': </span>' +
          "<span style=''>" +
          param[0].value +
          '</span>' +
          '</div>'
        return resultTooltip
      },
      textStyle: {
        color: '#879DB3',
        fontSize: 17,
      },
    },

    grid: {
      top: '16px',
      left: '0px',
      bottom: '30px',
      right: '0px',
      containLabel: true,
    },
    animation: false,
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(0,228,255,1)',
          },
        },
        axisLabel: {
          inside: false,
          textStyle: {
            color: '#879DB3',
            fontSize: 17,
            fontWeight: 600,
          },
          margin: 20, //刻度标签与轴线之间的距离。
        },
        data: newchartName,
      },
      {
        type: 'category',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        data: newchartName,
      },
    ],
    yAxis: [
      {
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
        axisLabel: {
          textStyle: { fontWeight: 600, color: '#879DB3', fontSize: 17 },
        },
      },
    ],
    series: [
      {
        name: '播种面积',
        type: 'pictorialBar',
        symbolSize: [barWidth, 20],
        symbolOffset: ['0%', -10],
        symbolPosition: 'end',
        z: 15,
        color: '#ffc241',
        zlevel: 2,
        data: newchartValue1,
      },

      {
        name: '播种面积',
        type: 'bar',
        barGap: '60%',
        barWidth: barWidth,
        itemStyle: {
          //
          // color: '',
          color: color1,
          borderColor: color1,
          borderWidth: 2,
          borderType: 'solid',
        },
        label: {
          show: true,
          formatter: '{c}' + '%',
          position: 'left',
          color: 'rgba(255,228,59,1)',
          fontSize: 12,
          textAlign: 'center',
        },
        zlevel: 2,
        data: newchartValue1,
      },

      {
        name: '种植面积',
        type: 'bar',
        xAxisIndex: 1,
        barGap: '60%',
        data: [100, 100, 100, 100, 100, 100, 100, 100],
        zlevel: 1,
        barWidth: barWidth,
        itemStyle: {
          normal: {
            color: 'rgba(255,164,41,.16)'
          },
        },
      },

      {
        name: '播种面积',
        type: 'pictorialBar',
        symbolSize: [barWidth, 10],
        symbolOffset: ['0%', 4],
        z: 12,
        color: '#ffc241',

        data: newchartValue1,
      },

      // 头
      {
        name: '播种面积',
        type: 'effectScatter',
        rippleEffect: {
          period: 1,
          scale: 5,
          brushType: 'fill',
        },
        z: 20,
        zlevel: 3,
        symbolPosition: 'end',
        // symbol: path,
        symbolSize: [14, 8],
        symbolOffset: [0, 0],
        itemStyle: {
          normal: {
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 10,
            shadowOffsetY: 6,
            shadowOffsetX: 0,
            color: 'rgba(255,164,41,0.5)'
          },
        },
        data: newchartValue1,
      },
    ],
  }

  return option
}
export const Option5 = () => {
  const newchartName = ['粮食作物', '油料作物', '糖料作物', '蔬菜', '果类'],
    newchartValue1: any = ['91', '51', '29', '91', '51', '29', '91', '51']
  const barWidth = 26
  const color1 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
      {
        //第一节下面
        offset: 0,
        color: '#1C98CD',
      },
      {
        offset: 1,

        color: 'rgba(61,187,255,.16)',
      },
    ],
  }

  const option = {
    //提示框
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      formatter: function (param: any) {
        const resultTooltip =
          "<div style='background:rgba(13,5,30,.3);padding:5px 10px;border-radius:4px;'>" +
          "<div style='text-align:center;'>" +
          param[0].name +
          '</div>' +
          "<div style='padding-top:5px;'>" +
          "<span style='display:inline-block;border-radius:4px;width:20px;height:10px;background-color:rgba(61,187,255,.3);border: 2px solid #3eb6f5;'></span>" +
          "<span style=''> " +
          param[0].seriesName +
          ': </span>' +
          "<span style=''>" +
          param[0].value +
          '</span>' +
          '</div>'
        return resultTooltip
      },
      textStyle: {
        color: '#879DB3',
        fontSize: 17,
      },
    },

    grid: {
      top: '16px',
      left: '0px',
      bottom: '30px',
      right: '0px',
      containLabel: true,
    },
    animation: false,
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(0,228,255,1)',
          },
        },
        axisLabel: {
          inside: false,
          textStyle: {
            color: '#879DB3',
            fontSize: 17,
            fontWeight: 600,
          },
          margin: 20, //刻度标签与轴线之间的距离。
        },
        data: newchartName,
      },
      {
        type: 'category',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        data: newchartName,
      },
    ],
    yAxis: [
      {
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
        axisLabel: {
          textStyle: { fontWeight: 600, color: '#879DB3', fontSize: 17 },
        },
      },
    ],
    series: [
      {
        name: '播种面积',
        type: 'pictorialBar',
        symbolSize: [barWidth, 20],
        symbolOffset: ['0%', -10],
        symbolPosition: 'end',
        z: 15,
        color: '#3eb6f5',
        zlevel: 2,
        data: newchartValue1,
      },

      {
        name: '播种面积',
        type: 'bar',
        barGap: '60%',
        barWidth: barWidth,
        itemStyle: {
          //
          // color: '',
          color: color1,
          borderColor: color1,
          borderWidth: 2,
          borderType: 'solid',
        },
        label: {
          show: true,
          formatter: '{c}' + '%',
          position: 'left',
          color: 'rgba(119,167,255,1)',
          fontSize: 12,
          textAlign: 'center',
        },
        zlevel: 2,
        data: newchartValue1,
      },

      {
        name: '种植面积',
        type: 'bar',
        xAxisIndex: 1,
        barGap: '60%',
        data: [100, 100, 100, 100, 100, 100, 100, 100],
        zlevel: 1,
        barWidth: barWidth,
        itemStyle: {
          normal: {
            color: 'rgba(61,187,255,.16)',
          },
        },
      },

      {
        name: '播种面积',
        type: 'pictorialBar',
        symbolSize: [barWidth, 10],
        symbolOffset: ['0%', 4],
        z: 12,
        color: '#3eb6f5',

        data: newchartValue1,
      },

      // 头
      {
        name: '播种面积',
        type: 'effectScatter',
        rippleEffect: {
          period: 1,
          scale: 5,
          brushType: 'fill',
        },
        z: 20,
        zlevel: 3,
        symbolPosition: 'end',
        // symbol: path,
        symbolSize: [14, 8],
        symbolOffset: [0, 0],
        itemStyle: {
          normal: {
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 10,
            shadowOffsetY: 6,
            shadowOffsetX: 0,
            color: 'rgba(119,167,255,1)',
          },
        },
        data: newchartValue1,
      },
    ],
  }

  return option
}
